<template>
  <div class="cursor">
    <div style="display: inline-block;margin-bottom: 20px" v-on:click="knowledgeClick()">
      <div class="background-color"
           style="box-shadow: -5px 0px 0px 0px rgba(45,183,160,1), 0 2px 12px 0 rgba(0,0,0,0.08);">
        <div style="font-size: 28px;height: 47px">{{ knowledgeTaskItemNum }}<span class="font-size-unit">条</span></div>
        <span>知识词条</span>
      </div>
    </div>

    <div class="background-color"
         style="box-shadow: -5px 0px 0px 0px rgba(45,90,250,1), 0 2px 12px 0 rgba(0,0,0,0.08);"
         v-on:click="calculateClick()">
      <div style="font-size: 28px;height: 47px">{{calculateTaskItemNum}}<span class="font-size-unit">条</span></div>
      <span>知识规则</span>
    </div>

    <div class="background-color"
         style="box-shadow: -5px 0px 0px 0px rgba(255,140,0,1), 0 2px 12px 0 rgba(0,0,0,0.08);"
         v-on:click="flowChartClick()">
      <div style="font-size: 28px;height: 47px">{{flowChartTaskItemNum}}<span class="font-size-unit">条</span></div>
      <span>流程图</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "RemindPage",
  props: {
    system: String
  },
  data() {
    return {
      knowledgeTaskItemNum: '',
      calculateTaskItemNum: '',
      flowChartTaskItemNum: ''
    }
  },
  methods: {
    knowledgeClick() {
      this.$router.push({
        path: '/taskEditManage',
        query: {
          activeName: 'knowledge'
        }
      })
    },
    calculateClick() {
      this.$router.push({
        path: '/taskEditManage',
        query: {
          activeName: 'calc'
        }
      })
    },
    flowChartClick() {
      this.$router.push({
        path: '/taskEditManage',
        query: {
          activeName: 'flowChart'
        }
      })
    }
  },
  created() {
    this.axios.get('/pmph/action/work/selectRemindPageNum', {
      params: {
        system: this.system
      }
    }).then((response) => {
      this.knowledgeTaskItemNum = response.data.knowledgeTaskItemNum
      this.calculateTaskItemNum = response.data.calculateTaskItemNum
      this.flowChartTaskItemNum = response.data.flowChartTaskItemNum
    })
  }
}
</script>

<style scoped>
.background-color {
  background: #FFFFFF;
  border-radius: 4px 0 0 4px;
  width: 270px;
  height: 82px;
  margin-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: inline-block;
  text-align: center
}

.background {
  background: #0000ff;

  border-radius: 4px 0 0 4px;
  width: 10px;
  height: 82px;
  display: inline-block;
  text-align: end
}

.font-size-unit {
  font-size: 14px;
  height: 36px;
  margin-top: 20px;
  font-family: Source Han Sans CN;
  color: #162549;
}
.cursor {
  cursor: pointer;
}
</style>
